<!-- 自定义底部导航栏 -->
<template>
	<view class="container">
		<view class="tabbar-item" :class="[item.centerItem ? ' center-item' : '']"
			:style="'width: calc(100% /' + tabbarList.length + ')'" @click="changeItem(item)"
			v-for="(item, i) in tabbarList" :key="i">
			<view class="item-top" :class=" [item. centerItem ? 'item-tuchu' : '' ]" style="width: 20px;height: 20px;">
				<image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" />
				<!-- 	<image src="../../static/c1.png" mode=""></image> -->
			</view>
			<view class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{{ item.text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/* 当前导航栏 */
			currPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				curItem: 0, // 当前所选导航栏
				tabbarList: [{
						id: 0,
						pagePath: "/pages/tabBar/home/home",
						iconPath: "/static/home.png",
						selectedIconPath: "/static/home-active.png",
						text: "首页",
						centerItem: false
					},
					{
						id: 1,
						pagePath: "/pages/tabBar/API/API",
						iconPath: "/static/image/list.png",
						selectedIconPath: "/static/image/list_active.png",
						text: "缴费记录",
						centerItem: false
					},
					{
						id: 2,
						pagePath: "/pages/tabBar/scanning/scanning",
						iconPath: "/static/image/qcqr.png",
						selectedIconPath: "static/image/qcqr.png",
						text: "扫描车牌",
						centerItem: true
					},
					{
						id: 3,
						pagePath: "/pages/tabBar/extUI/extUI",
						iconPath: "/static/image/upload.png",
						selectedIconPath: "/static/image/upload_active.png",
						text: "故障上传",
						centerItem: false
					},
					{
						id: 4,
						pagePath: "/pages/tabBar/template/template",
						iconPath: "/static/image/user.png",
						selectedIconPath: "static/image/user_active.png",
						text: "个人中心",
						centerItem: false
					}
				] // 导航栏列表
			};
		},
		mounted() {
			this.curItem = this.currPage; // 当前所选导航栏
			// #ifdef H5
			uni.hideTabBar(); // 隐藏 tabBar 导航栏
			// #endif
		},
		methods: {
			/* 导航栏切换 */
			changeItem(e) {
				// 中间凸起按钮
				if (e.id === 1) {
					// todo
					return;
				}
				uni.switchTab({
					url: e.pagePath
				}); // 跳转到其他 tab 页面
			}
		}
	};
</script>

<style lang="scss" scoped>
	$textDefaultColor: #999; // 文字默认颜色
	$bottomBg: #fff; // 底部背景
	$textSelectedColor: #0079FE; // 文字选中颜色
	$centerItemBg: #fff; // 中间凸起按钮背景

	.container {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 60px;
		color: $textDefaultColor;
		padding: 5px 0;
		background-color: $bottomBg;
		box-shadow: 0 0 10px #999;
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		height: 40px;

		.item-top {
			flex-shrink: 0;
			width: 30px;
			height: 30px;
			padding: 2px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.item-tuchu {
			width: 60px !important;
			height: 60px !important;
			border: 10px solid white;
			background: #0079FE;

			image {
				width: 20px;
				height: 20px;
				margin: 0 auto;

				margin-top: 9px;
			}

		}

		.item-bottom {
			width: 100%;
			font-size: 14px;
			margin-top: 4px;
		}

		.item-active {
			color: $textSelectedColor;
		}
	}

	.center-item {
		position: relative;

		.item-top {
			position: absolute;
			top: -37px;
			left: 50%;
			transform: translateX(-50%);
			width: 74px;
			height: 74px;
			// background-color: $centerItemBg;
			border-radius: 50%;
		}

		.item-bottom {
			position: absolute;
			bottom: 5px;
		}
	}
</style>